/* Calculadora de nota Cambridge · estilos propios (los comunes, en comun.css) */
:root { --fr-sin:#e5e7eb; --fr-inf:#fde7b0; --fr-C:#c9efdd; --fr-B:#86dbb8; --fr-A:#2fae84; }

.calc { margin-top:-32px; margin-bottom:56px; position:relative; }
.calc-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; align-items:start; }
.cc-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:22px; }
.cc-head { margin-bottom:16px; }
.cc-h { font-size:1.15rem; letter-spacing:-.02em; }
.cc-sub { font-size:.9rem; color:var(--text-muted); margin:4px 0 12px; }

/* Selector de examen: el mismo de la web */
.seg { display:inline-flex; gap:2px; background:var(--bg-body); padding:3px; border-radius:100px; border:1px solid var(--border); flex-wrap:wrap; }
.seg button { border:none; background:none; cursor:pointer; padding:8px 14px; border-radius:100px; font-family:inherit; font-size:.85rem; font-weight:700; color:var(--text-muted); white-space:nowrap; transition:background .2s ease, color .2s ease; }
.seg button small { font-weight:600; opacity:.75; margin-left:4px; }
.seg button:hover:not(.on) { color:var(--navy); }
.seg button.on { background:var(--bg-surface); color:var(--navy); box-shadow:var(--shadow-sm); }
.seg button:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }

/* Una fila por prueba */
.pp { display:grid; grid-template-columns:minmax(0,1fr) auto 72px; gap:6px 14px; align-items:center; padding:14px 0; border-top:1px solid var(--border); }
.pp-t label b { color:var(--navy); font-size:.98rem; }
.pp-t small { display:block; font-size:.8rem; color:var(--text-muted); line-height:1.45; }
.pp-t .pp-meta { color:var(--mint-deep); font-weight:600; margin-top:2px; }
.pp-in { display:flex; align-items:center; gap:6px; }
.pp-in input { width:78px; font-family:inherit; font-size:1.1rem; font-weight:700; color:var(--navy); text-align:center; padding:9px 6px; border:1px solid var(--border); border-radius:12px; background:var(--bg-body); font-variant-numeric:tabular-nums; }
.pp-in input:focus { outline:2px solid var(--mint); outline-offset:1px; background:#fff; }
.pp-max { font-size:.86rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.pp-out { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; border-radius:12px; font-variant-numeric:tabular-nums; }
.pp-out b { font-size:1.05rem; color:var(--navy); line-height:1.1; }
.pp-out span { font-size:.7rem; font-weight:700; color:var(--dark-soft); }
.cc-acciones { display:flex; gap:6px; justify-content:space-between; border-top:1px solid var(--border); padding-top:12px; }
.lnk { border:none; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; color:var(--mint-deep); padding:6px 10px; border-radius:100px; }
.lnk:hover { background:var(--mint-tint); }
.lnk.del { color:#b42318; }
.lnk.del:hover { background:#fef3f2; }

/* Colores de franja */
.fr-sin { background:var(--fr-sin); }
.fr-inf { background:var(--fr-inf); }
.fr-C { background:var(--fr-C); }
.fr-B { background:var(--fr-B); }
.fr-A { background:var(--fr-A); }
.pp-out.fr-A b, .pp-out.fr-A span { color:#fff; }

/* Resultado */
.cc-res { position:sticky; top:96px; }
.cr-label { display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.cr-vacio p { color:var(--text-muted); margin-top:8px; }
.cr-faltan { font-weight:700; color:var(--navy) !important; }
.cr-top { display:flex; align-items:center; gap:16px; margin-top:10px; padding:16px 18px; border-radius:16px; }
.cr-top.fr-sin { background:#f3f4f6; }
.cr-num { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:3.2rem; line-height:1; color:var(--navy); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.cr-txt b { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.3rem; color:var(--navy); line-height:1.2; }
.cr-txt span { font-weight:700; color:var(--dark-soft); }
.cr-top.fr-A .cr-num, .cr-top.fr-A .cr-txt b, .cr-top.fr-A .cr-txt span { color:#fff; }
.cr-explica { font-size:.92rem; color:var(--dark-soft); margin:10px 0 4px; }
.cr-falta { margin-top:14px; background:var(--navy-tint); border-radius:12px; padding:12px 14px; font-size:.9rem; color:var(--navy); }
.cr-falta p + p { margin-top:4px; color:var(--dark-soft); }
.cr-tope { margin-top:14px; font-weight:700; color:var(--mint-deep); }
.cr-cerca { margin-top:10px; font-size:.84rem; color:#92591a; background:#fdf6e7; border-radius:10px; padding:8px 12px; }
.cr-papeles { margin-top:18px; }
.crp { display:grid; grid-template-columns:118px minmax(0,1fr) 40px; gap:10px; align-items:center; margin-top:8px; background:none !important; position:relative; }
.crp span { font-size:.86rem; font-weight:600; color:var(--dark-soft); }
.crp i { height:10px; border-radius:100px; background:var(--navy-tint); position:relative; overflow:hidden; }
.crp i::after { content:''; position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:100px; background:var(--navy); }
.crp.fr-A i::after { background:var(--fr-A); }
.crp.fr-B i::after { background:#4cc79a; }
.crp.fr-C i::after { background:#7fd5b3; }
.crp.fr-inf i::after { background:#f0b429; }
.crp.fr-sin i::after { background:#9ca3af; }
.crp b { text-align:right; color:var(--navy); font-variant-numeric:tabular-nums; }
.crp-tag { grid-column:1 / -1; justify-self:start; margin-top:-4px; font-style:normal; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#92591a; background:#fdf6e7; border-radius:100px; padding:1px 8px; }
.crp-tag.ok { color:var(--mint-deep); background:var(--mint-tint); }
.cr-aviso { margin-top:16px; font-size:.78rem; color:var(--text-muted); line-height:1.5; }

/* La escala del examen */
.cbar { position:relative; margin:22px 0 30px; }
.cbar-tramos { display:flex; height:30px; border-radius:10px; overflow:hidden; }
.cbar-tramos span { display:flex; align-items:center; justify-content:center; min-width:0; }
.cbar-tramos em { font-style:normal; font-size:.7rem; font-weight:800; color:var(--dark-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
.cbar-tramos .fr-A em { color:#fff; }
.cbar-p { position:absolute; top:4px; width:4px; height:22px; margin-left:-2px; border-radius:2px; background:rgba(43,51,73,.45); }
.cbar-tu { position:absolute; top:-8px; width:4px; height:46px; margin-left:-2px; border-radius:2px; background:var(--navy); transition:left .3s cubic-bezier(0.23, 1, 0.32, 1); }
.cbar-tu span { position:absolute; top:-22px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; font-size:.72rem; font-weight:800; padding:1px 7px; border-radius:100px; }
.cbar-num { position:relative; height:16px; margin-top:4px; font-size:.68rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.cbar-num span { position:absolute; transform:translateX(-50%); }
.cbar-num span:first-child { left:0; transform:none; }
.cbar-num span:last-child { right:0; left:auto !important; transform:none; }

/* Preguntas frecuentes */
.faq-calc { max-width:820px; margin:0 auto 72px; }
.faq-calc h2 { font-size:1.5rem; letter-spacing:-.03em; margin-bottom:14px; }
.faq-calc details { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin-bottom:10px; }
.faq-calc summary { cursor:pointer; font-weight:700; color:var(--navy); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq-calc summary::-webkit-details-marker { display:none; }
.faq-calc summary::after { content:'+'; color:var(--text-muted); font-weight:500; }
.faq-calc details[open] summary::after { content:'−'; }
.faq-calc details p { margin-top:8px; font-size:.94rem; color:var(--text-main); }
.faq-calc .fuente { font-size:.82rem; color:var(--text-muted); margin-top:16px; }
.faq-calc .fuente a { color:var(--mint-deep); font-weight:600; }

/* Tablas fijas de notas de corte: el mismo dato que la calculadora, pero
   escrito en el HTML para que Google lo lea sin ejecutar el JS. */
.tabla-calc h2 + p { font-size:.94rem; margin-bottom:12px; }
.tabla-calc h2:not(:first-child) { margin-top:36px; }
.tabla-scroll { overflow-x:auto; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; }
.tabla-calc table { width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px; }
.tabla-calc th, .tabla-calc td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.tabla-calc thead th { color:var(--text-muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tabla-calc tbody th { color:var(--navy); font-weight:700; }
.tabla-calc tbody tr:last-child th, .tabla-calc tbody tr:last-child td { border-bottom:0; }

@media (max-width:900px) {
  .calc-grid { grid-template-columns:1fr; }
  .cc-res { position:static; }
}
@media (max-width:520px) {
  .cc-card { padding:18px 16px; }
  .pp { grid-template-columns:minmax(0,1fr) 64px; }
  .pp-in { grid-column:1; grid-row:2; }
  .pp-out { grid-column:2; grid-row:1 / span 2; }
  .seg { width:100%; } .seg button { flex:1; padding:8px 4px; }
  .crp { grid-template-columns:96px minmax(0,1fr) 36px; }
  .cbar-tramos em { font-size:.6rem; }
}
@media (prefers-reduced-motion: reduce) { .cbar-tu, .seg button { transition:none; } }