/* Estilos compartidos del sitio de incentivos docentes.
   Paleta institucional del Colegio Camilo Henriquez. */
:root{
    --navy:#1F3B66; --azul:#4F81BD; --teal:#2E5A6E; --amber:#C8862B;
    /* AMBER oscurecido para texto: #C8862B sobre los fondos claros da 2,6:1 (WCAG exige 4,5:1) */
    --amber-txt:#8A5A16;
    --ok:#2D7830; --okbg:#E4F1E4; --bad:#AC423A; --badbg:#F7E4E2;
    --gris:#5F6674; --grisbg:#EDEFF2; --line:#D4DCE8; --bg:#F4F6FA; --card:#FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* Foco visible para los elementos que se operan con teclado */
  .case-card:focus-visible, .radar-legend .it:focus-visible, .chip:focus-visible, button:focus-visible{
    outline:3px solid var(--amber); outline-offset:2px;}
  body{font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:#22303F; font-size:14px;}
  header{background:var(--navy); color:#fff; padding:22px 32px;}
  header h1{font-size:22px; letter-spacing:.3px;}
  header p{color:#C6D4E8; margin-top:4px; font-size:13px;}
  main{max-width:1180px; margin:0 auto; padding:24px 24px 60px;}
  @media (max-width:520px){ header{padding:18px 16px;} main{padding:16px 12px 40px;} footer{padding:0 12px 30px;} }
  h2{font-size:16px; color:var(--navy); margin:28px 0 12px; border-left:4px solid var(--amber); padding-left:10px;}
  .hint{color:var(--gris); font-size:12.5px; margin-bottom:12px;}

  /* tarjetas de casos */
  .cases{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;}
  .case-card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; cursor:pointer; transition:box-shadow .15s, border-color .15s;}
  .case-card:hover{box-shadow:0 3px 10px rgba(31,59,102,.15);}
  .case-card.active{border:2px solid var(--azul); box-shadow:0 3px 10px rgba(31,59,102,.18);}
  .case-card h3{font-size:14px; color:var(--navy); margin-bottom:6px;}
  .case-card p{font-size:12px; color:var(--gris); line-height:1.45; margin-bottom:8px;}
  .badge{display:inline-block; font-size:12px; font-weight:bold; padding:3px 8px; border-radius:20px; margin:2px 3px 0 0;}
  .b-hitos{background:#E3EAF5; color:var(--navy);}
  .b-mayor{background:#F7EBD8; color:var(--amber-txt); border:1px solid var(--amber);}
  .b-ok{background:var(--okbg); color:var(--ok);}
  .b-no{background:var(--grisbg); color:var(--gris);}
  .b-alerta{background:var(--badbg); color:var(--bad);}

  /* panel principal */
  .panel{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-top:14px;}
  .panel h3{color:var(--navy); font-size:15px; margin-bottom:4px;}
  .leccion{background:#F2F6FB; border-left:4px solid var(--azul); padding:10px 14px; border-radius:0 8px 8px 0; font-size:13px; line-height:1.55; margin:10px 0 18px;}

  /* ruta del mes */
  .ruta{display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:14px 4px 8px;}
  .nodo{display:flex; flex-direction:column; align-items:center; min-width:118px;}
  .circ{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:13px; color:#fff; border:3px solid transparent;}
  .circ.win{background:var(--ok);}
  .circ.lose{background:#C9CFD8; color:#5B6472;}
  .diam{width:54px; height:54px; transform:rotate(45deg); border-radius:10px; display:flex; align-items:center; justify-content:center; margin:4px 0;}
  .diam span{transform:rotate(-45deg); font-weight:bold; font-size:12px; color:#fff; text-align:center; line-height:1.15;}
  .diam.win{background:var(--teal);}
  .diam.lose{background:#C9CFD8;} .diam.lose span{color:#5B6472;}
  .conn{height:4px; background:var(--line); flex:1; min-width:26px; margin-top:28px; border-radius:2px;}
  .conn.win{background:var(--ok);}
  .nodo .lbl{font-size:12px; color:var(--gris); margin-top:7px; text-align:center; line-height:1.35;}
  .nodo .lbl b{color:#22303F;}
  .dots{display:flex; gap:4px; margin-top:6px;}
  .dot{width:11px; height:11px; border-radius:50%; background:#C9CFD8;}
  .dot.on{background:var(--ok);}
  .dot.pen{background:var(--bad);}
  .premios-final{display:flex; flex-direction:column; gap:6px; margin-left:8px; min-width:210px;}
  .premio-chip{border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12px; background:var(--grisbg); color:var(--gris);}
  .premio-chip.win{background:var(--okbg); color:var(--ok); border-color:var(--ok); font-weight:bold;}
  .premio-chip.mayor{border-width:2px;}
  .premio-chip.mayor.win{background:#FBF3E4; color:var(--amber-txt); border-color:var(--amber);}
  .premio-chip small{display:block; font-weight:normal; font-size:12px; opacity:.85;}

  /* canje semanal */
  .canjes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:8px;}
  .canje-card{border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:var(--card);}
  .canje-card .cuando{font-size:12px; color:var(--gris); text-transform:uppercase; letter-spacing:.4px;}
  .canje-card .que{font-size:12.5px; margin:5px 0 7px; line-height:1.4; font-weight:bold; color:var(--navy);}
  .canje-card.sin{background:var(--grisbg);} .canje-card.sin .que{color:var(--gris); font-weight:normal;}
  .canje-card.total{background:var(--navy); border-color:var(--navy);}
  .canje-card.total .cuando{color:#C6D4E8;}
  .canje-card.total .que{color:#fff; font-size:15px;}
  .valor-chip{display:inline-block; background:#F7EBD8; color:var(--amber-txt); border:1px solid var(--amber); font-size:12px; font-weight:bold; border-radius:20px; padding:2px 9px;}
  .valor-chip.gris{background:var(--grisbg); color:var(--gris); border-color:var(--line);}

  /* escala de beneficios */
  .escala{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:8px;}
  .esc-item{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--grisbg);}
  .esc-item .req{font-size:12px; color:var(--gris); text-transform:uppercase; letter-spacing:.4px;}
  .esc-item .nom{font-size:12.5px; margin:4px 0 6px; line-height:1.35; color:#22303F;}
  .esc-item .est{font-size:12px; font-weight:bold;}
  .esc-item.win{background:var(--okbg); border-color:var(--ok);} .esc-item.win .est{color:var(--ok);}
  .esc-item.no .est{color:var(--gris);}
  .esc-item.mayor{border-width:2px; border-color:var(--amber); background:#FBF3E4;}
  .esc-item.mayor.no{background:var(--grisbg); border-color:#D8C29A;}
  .esc-item.mayor.win .est{color:var(--amber-txt);}

  /* radiografia: radar + mapa de calor */
  .radiografia{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
  .chart-panel{flex:1; min-width:340px; border:1px solid var(--line); border-radius:10px; background:var(--card); padding:14px 16px;}
  .chart-panel h4{font-size:13px; color:var(--navy); margin-bottom:2px;}
  .chart-panel .sub{font-size:12px; color:var(--gris); margin-bottom:10px;}
  .radar-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
  .radar-legend .it{display:flex; align-items:center; gap:6px; font-size:12px; cursor:pointer; border:1px solid var(--line); border-radius:20px; padding:3px 10px; user-select:none;}
  .radar-legend .it.off{opacity:.35;}
  .radar-legend .sw{width:12px; height:12px; border-radius:3px;}
  table.heat td{padding:0; border:2px solid #fff;}
  table.heat .cell{padding:10px 6px; font-size:12.5px; font-weight:bold; text-align:center; border-radius:6px;}
  table.heat .cell small{display:block; font-weight:normal; font-size:12px; opacity:.8;}
  table.heat th{border-radius:4px;}
  .heat-scale{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:var(--gris);}
  .heat-bar{flex:1; height:12px; border-radius:6px; background:linear-gradient(90deg,#B3453C,#E5B96B 55%,#CDE3CD 72%,#2F7D32); position:relative;}
  .heat-bar .mark{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--navy);}

  /* tablas de detalle */
  table{border-collapse:collapse; width:100%; margin-top:8px;}
  th{background:var(--navy); color:#fff; font-size:12px; padding:7px 8px; text-align:center; font-weight:bold;}
  td{border:1px solid var(--line); padding:5px 8px; text-align:center; font-size:12.5px; background:#fff;}
  /* La celda del curso es th[scope=row] por accesibilidad, pero se ve como celda de datos */
  td.curso, th.curso{border:1px solid var(--line); padding:5px 8px; font-size:12.5px;
    text-align:left; font-weight:bold; color:var(--navy); background:#F2F6FB;}
  tr.wk-head td{background:var(--teal); color:#fff; font-weight:bold; text-align:left; font-size:12px; border-color:var(--teal);}
  tr.wk-head td .wk-res{float:right; font-weight:bold;}
  input[type=number]{width:62px; padding:4px 5px; border:1px solid var(--line); border-radius:6px; font-family:Arial; font-size:12.5px; text-align:center; background:#FDF6EA; color:#0B47A1;}
  input[type=number]:focus{outline:2px solid var(--azul);}
  .disc-flag{display:inline-block; font-size:12px; font-weight:bold; color:var(--bad); background:var(--badbg); border-radius:10px; padding:1px 6px; margin-left:4px;}
  .pen-val{color:var(--bad); font-weight:bold;}
  .prem-val{color:var(--ok); font-weight:bold;}
  .disc-flag.exig{color:var(--teal); background:#E3EDF0;}
  .score-cell{position:relative; min-width:96px;}
  .score-bar{position:absolute; left:0; top:0; bottom:0; background:rgba(79,129,189,.18); z-index:0;}
  .score-txt{position:relative; z-index:1; font-weight:bold;}
  .si{color:var(--ok); font-weight:bold;} .no{color:var(--bad); font-weight:bold;}
  .aviso-pen{background:var(--badbg); border-left:4px solid var(--bad); color:#7A2F28; padding:8px 12px; border-radius:0 8px 8px 0; font-size:12.5px; margin-top:10px; line-height:1.5;}

  /* constructor del mes */
  .cons-wrap{display:flex; gap:16px; flex-wrap:wrap;}
  /* min-width fijo desbordaba bajo 340px de viewport; con min() cede en móvil */
  .cons-controls{flex:0 0 380px; min-width:min(340px, 100%); max-width:100%;}
  .cons-side{flex:1; min-width:360px;}
  #consChartB{width:100%; margin-top:10px;}
  #consChartB svg{width:100%; display:block;}
  .chips{flex-wrap:nowrap;}
  .cons-week{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--card); margin-bottom:9px;}
  .cons-week h5{font-size:12px; color:#fff; background:var(--teal); display:inline-block; padding:2px 10px; border-radius:14px; margin-bottom:7px;}
  .cons-week h5 .res{font-weight:normal; opacity:.9;}
  .cons-row{display:flex; align-items:center; gap:6px; margin:4px 0;}
  .cons-row .dim{width:112px; font-size:12px; color:#22303F;}
  .chips{display:flex; gap:4px; flex-wrap:wrap;}
  .chip{border:1px solid var(--line); border-radius:14px; padding:2px 9px; font-size:12px; cursor:pointer; background:#fff; color:var(--gris); user-select:none;}
  .chip:hover{border-color:var(--azul);}
  .chip.sel{background:var(--azul); color:#fff; border-color:var(--azul); font-weight:bold;}
  .cons-week.hito-si{border-color:var(--ok); box-shadow:inset 3px 0 0 var(--ok);}
  .cons-total{font-size:13px; color:var(--navy); font-weight:bold; margin-top:6px;}
  .cons-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:12px; color:#22303F;}
  .cons-legend .it{display:flex; align-items:center; gap:5px;}
  .cons-legend .sw{width:12px; height:12px; border-radius:3px;}

  /* parametros */
  .params{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:10px 18px; margin-top:10px;}
  .param{display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 12px;}
  .param label{font-size:12px; color:#22303F; line-height:1.3;}
  details{margin-top:10px;}
  summary{cursor:pointer; color:var(--navy); font-weight:bold; font-size:13.5px; padding:8px 0;}
  .warn-pesos{color:var(--bad); font-weight:bold; font-size:12px; margin-top:8px;}
  .btn{background:var(--azul); color:#fff; border:none; border-radius:8px; padding:8px 14px; font-family:Arial; font-size:12.5px; cursor:pointer; font-weight:bold;}
  .btn:hover{background:var(--navy);}
  .btn.sec{background:var(--grisbg); color:var(--navy);}
  footer{max-width:1180px; margin:0 auto; padding:0 24px 40px; color:var(--gris); font-size:12px; line-height:1.5;}

/* ===== Navegación entre páginas ===== */
nav.sitio{background:#172E52; padding:0 32px; display:flex; gap:2px; flex-wrap:wrap;}
nav.sitio a{color:#C6D4E8; text-decoration:none; font-size:13px; padding:11px 16px; border-bottom:3px solid transparent;}
nav.sitio a:hover{color:#fff; background:rgba(255,255,255,.07);}
nav.sitio a[aria-current="page"]{color:#fff; border-bottom-color:var(--amber); font-weight:bold;}
nav.sitio a:focus-visible{outline:3px solid var(--amber); outline-offset:-3px;}

/* ===== Escalera de dificultad ===== */
td.err-ok{color:var(--ok); font-weight:bold;}
td.err-mal{color:var(--bad); font-weight:bold;}
.promo-box{border-left:4px solid var(--teal); background:#F1F6F8; padding:11px 14px; border-radius:0 8px 8px 0; font-size:12.5px; line-height:1.55; margin-top:12px;}
.promo-box.no{border-left-color:var(--amber); background:#FBF3E4;}

/* ===== Hallazgos ===== */

/* ===== Backlog ===== */
.bl-wrap{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start;}
.bl-form{flex:0 0 340px; min-width:min(320px,100%); max-width:100%;}
.bl-lista{flex:1; min-width:min(320px,100%);}
.campo{margin-bottom:12px;}
.campo label{display:block; font-size:12px; font-weight:bold; color:var(--navy); margin-bottom:4px;}
.campo .ayuda{display:block; font-weight:normal; color:var(--gris); font-size:12px; margin-top:2px;}
.campo input[type=text], .campo textarea, .campo select{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-family:Arial; font-size:13px; background:#FDFDFE; color:#22303F;}
.campo textarea{min-height:110px; resize:vertical; line-height:1.5;}
.campo input:focus, .campo textarea:focus, .campo select:focus{outline:2px solid var(--azul); border-color:var(--azul);}
.contador{font-size:12px; color:var(--gris); text-align:right; margin-top:2px;}
.contador.tope{color:var(--bad); font-weight:bold;}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.aviso{padding:10px 13px; border-radius:8px; font-size:12.5px; line-height:1.5; margin-bottom:12px;}
.aviso.ok{background:var(--okbg); color:#1D5620; border:1px solid var(--ok);}
.aviso.mal{background:var(--badbg); color:#8A2F28; border:1px solid var(--bad);}
.aviso.info{background:#F2F6FB; color:var(--navy); border:1px solid var(--azul);}
/* Aviso de revision: no es un error del docente, es una senal para la direccion
   academica, por eso ambar y no rojo. */
.aviso.alerta{background:#FCF6EA; color:var(--amber-txt); border:1px solid var(--amber);}
.idea{border:1px solid var(--line); border-radius:10px; padding:12px 15px; background:var(--card); margin-bottom:9px;}
.idea h4{font-size:13.5px; color:var(--navy); margin-bottom:5px;}
.idea .meta{font-size:12px; color:var(--gris);}
.idea .detalle{font-size:12.5px; line-height:1.6; margin-top:8px; white-space:pre-wrap;}
.idea .btn-ver{margin-top:7px;}
.tipo-chip{display:inline-block; font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.4px; padding:2px 8px; border-radius:20px; margin-right:6px;}
.vacio{border:2px dashed var(--line); border-radius:10px; padding:26px 20px; text-align:center; color:var(--gris); font-size:13px; line-height:1.6;}

/* Texto de terceros: un título o detalle sin espacios no debe desbordar la tarjeta */
.idea h4, .idea .meta, .idea .detalle, .aviso, .vacio{
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;}
.idea{overflow:hidden;}

/* ===== Franja de resumen, fija arriba de las vistas de trabajo ===== */
/* ===== Encabezado del mes =====
   Una sola cifra dominante con su barra de avance, y el resto en una frase
   corrida. Cinco columnas del mismo peso no tenian jerarquia: obligaban a
   recorrer cinco rotulos para reconstruir lo que ahora se lee de una vez. */
.resumen{background:linear-gradient(120deg, #1F3B66 0%, #2E5A6E 78%, #35707F 100%);
  color:#FFFFFF; padding:0; border:none;}
.res-in{max-width:1180px; margin:0 auto; padding:16px 32px; display:flex; gap:26px;
  align-items:center;}
.res-cifra{display:flex; flex-direction:column; align-items:center; line-height:1;
  padding-right:24px; border-right:1px solid rgba(255,255,255,.22); min-width:112px;}
.res-num{font-size:38px; font-weight:bold; letter-spacing:-.5px;}
.res-de{font-size:12.5px; opacity:.78; margin-top:5px;}
.res-cuerpo{flex:1; min-width:220px;}
.res-tit{font-size:13px; font-weight:bold; letter-spacing:.3px; margin-bottom:8px;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.res-esc{font-weight:normal; font-size:12px; background:rgba(255,255,255,.16);
  border-radius:20px; padding:2px 11px;}
.res-barra{height:9px; background:rgba(255,255,255,.2); border-radius:20px; overflow:hidden;}
.res-barra span{display:block; height:100%; background:#9FD08F; border-radius:20px;
  transition:width .25s;}
.res-frase{font-size:13px; line-height:1.55; margin:8px 0 0; opacity:.95;}
.res-frase b{color:#FFE6B8;}
@media (max-width:720px){
  .res-in{flex-direction:column; align-items:flex-start; gap:12px; padding:14px 18px;}
  .res-cifra{flex-direction:row; align-items:baseline; gap:9px; border-right:none;
    border-bottom:1px solid rgba(255,255,255,.22); padding:0 0 9px; width:100%;}
  .res-num{font-size:32px;}
}

/* ===== La cadena del sistema en cuatro pasos ===== */
.cadena{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; margin:10px 0 4px;}
.cadena-paso{flex:1; min-width:150px; background:var(--card); border:1px solid var(--line);
  border-top:4px solid var(--azul); border-radius:8px; padding:11px 14px;}
.cadena-nom{font-size:13px; font-weight:bold; color:var(--navy);}
.cadena-val{font-size:15px; font-weight:bold; color:var(--teal); margin:3px 0 5px;}
.cadena-desc{font-size:12px; color:var(--gris); line-height:1.45;}
.cadena-flecha{align-self:center; color:var(--line); font-size:26px; line-height:1;}

/* ===== Leyenda del lenguaje de color ===== */
.leyenda{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.leyenda-it{display:flex; align-items:center; gap:6px; font-size:12px;
  border:1px solid var(--line); border-radius:20px; padding:4px 12px; background:var(--card);}
.leyenda-sw{width:12px; height:12px; border-radius:3px; flex:0 0 auto;}
.leyenda-desc{color:var(--gris);}

/* ===== Explicaciones plegadas: no estorban hasta que se piden ===== */
.porque{margin:10px 0 14px;}
.porque summary{cursor:pointer; font-size:12.5px; color:var(--azul); font-weight:bold;
  padding:6px 0; user-select:none;}
.porque summary:hover{color:var(--navy);}
.porque summary:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.porque-cuerpo{background:#F2F6FB; border-left:4px solid var(--azul); border-radius:0 8px 8px 0;
  padding:11px 15px; font-size:12.5px; line-height:1.6;}

.banda-error{background:var(--badbg); color:var(--bad); border-bottom:2px solid var(--bad);
  padding:12px 32px; font-size:13px; font-weight:bold;}

.chip.mini{font-size:12px; padding:2px 7px;}

/* ===== Simulador de una sola pantalla ===== */
main.ancho{max-width:1560px;}
.sim-escenarios{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 6px;}
.sim-rot{font-size:12px; color:var(--gris); text-transform:uppercase; letter-spacing:.5px;}
.esc-chip{font-size:12px; border:1px solid var(--line); border-radius:20px; padding:5px 13px;
  background:var(--card); cursor:pointer; user-select:none; color:var(--navy);}
.esc-chip:hover{border-color:var(--azul); background:#F2F6FB;}
.esc-chip.sel{background:var(--navy); color:#fff; border-color:var(--navy); font-weight:bold;}
.esc-chip:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}

.sim-grid{display:grid; grid-template-columns:minmax(430px,0.95fr) minmax(480px,1.15fr);
  gap:16px; align-items:start; margin-top:8px;}
.sim-controles, .sim-resultado{background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; min-width:0;}
.sim-controles h2, .sim-resultado h2{margin-top:0;}
@media (max-width:1100px){ .sim-grid{grid-template-columns:1fr;} }

table.matriz{border-collapse:separate; border-spacing:4px; width:100%; margin-top:6px;}
table.matriz th, table.matriz td{border:none; padding:0;}
.mx-esq{background:transparent; font-size:12px; color:var(--gris); text-align:left;
  text-transform:uppercase; letter-spacing:.4px; padding:0 4px 4px !important;}
.mx-sem{background:var(--grisbg); border-radius:8px; padding:6px 4px !important;
  border-top:3px solid var(--line); color:var(--navy);}
.mx-sem.si{border-top-color:var(--ok); background:var(--okbg);}
.mx-sem.no{border-top-color:var(--bad); background:var(--badbg);}
.mx-sem span{display:block; line-height:1.3;}
.mx-sem-n{font-size:12px; font-weight:bold;}
.mx-sem-e{font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.3px;}
.mx-sem.si .mx-sem-e{color:var(--ok);} .mx-sem.no .mx-sem-e{color:var(--bad);}
.mx-sem-d{font-size:12px; color:var(--gris); font-weight:normal;}
.mx-curso{background:#F2F6FB; border-radius:8px; text-align:left; font-size:12px; font-weight:bold;
  color:var(--navy); padding:0 8px !important; width:92px;}
.mx-celda{padding:0 !important;}
.mx-punt{border-radius:7px 7px 0 0; padding:5px 4px 3px; font-size:15px; font-weight:bold;
  text-align:center; line-height:1.05;}
.mx-punt small{display:block; font-size:12px; font-weight:normal; opacity:.9;}
.mx-rango{width:100%; display:block; margin:2px 0 1px; accent-color:var(--azul); cursor:ew-resize;}
.mx-rango:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.mx-factor{width:100%; font-family:Arial; font-size:12px; padding:2px; border:1px solid var(--line);
  border-radius:0 0 7px 7px; background:#FAFBFD; color:var(--navy); cursor:pointer;}
.mx-factor:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.mx-cert-tabla{margin-top:12px;}
.mx-cert-cab{font-size:12px; color:var(--gris); text-align:left; padding:0 4px 4px !important;}
.mx-cert{font-size:12px; text-align:center; padding:3px; border-radius:0 0 7px 7px; font-weight:bold;}
.mx-cert.si{background:var(--okbg); color:var(--ok);}
.mx-cert.no{background:var(--badbg); color:var(--bad);}

/* ===== Composición de una celda: los cuatro indicadores y de dónde sale el puntaje ===== */
.mx-punt{cursor:pointer;}
.mx-punt:hover{filter:brightness(1.06);}
.mx-punt:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.mx-punt.abierta{box-shadow:inset 0 0 0 3px var(--navy);}
/* ---- Detalle desplegable de cada curso ---- */
#cursos{margin-top:6px;}
details.cur{border:1px solid var(--line); border-radius:10px; background:var(--card);
  margin-bottom:8px; overflow:hidden;}
details.cur[open]{border-color:var(--navy); box-shadow:0 1px 6px rgba(31,59,102,.10);}
.cur-cab{display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer;
  font-size:13px; list-style:none; background:#F7FAFD;}
.cur-cab::-webkit-details-marker{display:none;}
/* Triangulo propio: el nativo se oculta para poder rotarlo con el estado. */
.cur-cab::before{content:'\25B8'; color:var(--navy); font-size:13px; transition:transform .15s;}
details.cur[open] .cur-cab::before{transform:rotate(90deg);}
details.cur summary:focus-visible{outline:3px solid var(--amber); outline-offset:-3px;}
.cur-nom{font-weight:bold; color:var(--navy); font-size:13.5px;}
.cur-det{color:var(--gris); font-size:12px; flex:1;}
.cur-est{font-size:12px; font-weight:bold; padding:2px 9px; border-radius:20px; white-space:nowrap;}
.cur-est.si{background:var(--okbg); color:var(--ok);}
.cur-est.no{background:var(--badbg); color:var(--bad);}

table.sc-tabla{border-collapse:collapse; width:100%; margin:2px 0 0; table-layout:fixed;}
table.sc-tabla th, table.sc-tabla td{border:1px solid var(--line); padding:5px 7px;
  font-size:12px; text-align:center; background:transparent; vertical-align:middle;}
table.sc-tabla tr:first-child th{background:#EEF3F9; color:var(--navy); font-size:12px;
  font-weight:bold; line-height:1.3;}
table.sc-tabla tr:first-child th small{display:block; font-size:12px; color:var(--amber-txt);
  font-weight:normal;}
.sc-th{width:168px; text-align:left !important;}
/* Las filas son criterios de medicion y las columnas semanas, igual que en la
   matriz de arriba: cambiar de orientacion entre dos tablas de la misma pantalla
   obliga a releer las cabeceras cada vez. */
.sc-ind{text-align:left !important; color:var(--navy); font-weight:bold; width:168px;
  background:#FAFBFD !important; line-height:1.3;}
.sc-ind small{display:block; font-size:12px; font-weight:normal; color:var(--gris);}
/* La columna a la que se llego desde la matriz queda marcada, de arriba abajo. */
table.sc-tabla th.foco, table.sc-tabla td.foco{background:#FFF8E8 !important;}
.sc-campo input{width:100%; display:block; accent-color:var(--azul); margin:0 0 3px;}
.sc-campo input:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.sc-cifras{display:block; font-size:12px; color:var(--gris); line-height:1.35;}
.sc-val{color:var(--navy); font-size:12.5px;}
.sc-ap-rot{color:var(--gris);}
.sc-ap{color:#22303F; font-weight:bold;}
tr.sc-res th, tr.sc-res td{background:#FBFCFE;}
tr.sc-res:first-of-type th{border-top:2px solid var(--line);}
.sc-base{font-weight:bold; color:var(--navy); font-size:12.5px;}
.sc-ajuste{font-weight:bold; font-size:12.5px;}
.sc-ajuste.pen-val{color:var(--bad);} .sc-ajuste.prem-val{color:var(--ok);}
.sc-fin{display:inline-block; font-size:12.5px; font-weight:bold; padding:2px 9px;
  border-radius:20px; white-space:nowrap;}
.sc-fin.si{background:var(--okbg); color:var(--ok);}
.sc-fin.no{background:var(--badbg); color:var(--bad);}
details.cur .hint{padding:0 13px 11px; margin:6px 0 0;}
@media (max-width:900px){
  table.sc-tabla{display:block; overflow-x:auto; table-layout:auto;}
  table.sc-tabla th, table.sc-tabla td{min-width:104px;}
  .sc-th, .sc-ind{min-width:150px;}
  .cur-det{display:none;}
}


/* ---- Generador de escenarios y relato del mes ---- */
#semilla{width:76px; font-size:12.5px; padding:4px 6px; border:1px solid var(--line);
  border-radius:6px; background:#FFFFFF; color:#1B2733;}
#semilla:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.rel{border:1px solid var(--line); border-left:4px solid var(--navy); border-radius:0 10px 10px 0;
  background:var(--card); padding:11px 15px; margin:10px 0 4px;}
.rel-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.rel-sem{font-size:12px; color:var(--gris); background:#F1F4F8; border-radius:20px; padding:2px 10px;}
.rel p{font-size:12.5px; line-height:1.55; color:#22303F; margin:0 0 6px;}
.rel p:last-child{margin-bottom:0;}
#semilla[aria-invalid]{border-color:var(--bad); background:var(--badbg);}


/* ---- Tabla de la trayectoria: las cifras que el SVG ya no intenta rotular ---- */
#consTabla{margin-top:10px; overflow-x:auto;}
table.ct{border-collapse:collapse; width:100%; min-width:520px;}
table.ct caption.ct-cap{text-align:left; font-size:12.5px; font-weight:bold; color:var(--navy);
  padding:0 0 6px;}
table.ct th, table.ct td{border:1px solid var(--line); padding:5px 8px; font-size:12.5px;
  text-align:center; vertical-align:middle; background:transparent;}
table.ct tr:first-child th{background:#EEF3F9; color:var(--navy); font-size:12px;}
.ct-th{text-align:left !important; width:230px;}
.ct-comp{text-align:left !important; color:var(--navy); font-weight:bold; width:230px;
  background:#FAFBFD !important; line-height:1.3;}
.ct-comp small{display:block; font-size:12px; font-weight:normal; color:var(--gris);}
/* El color del componente es el mismo del grafico: la leyenda vive aqui y no
   como un bloque de fichas aparte. */
.ct-punto{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px;}
.ct-nada{color:#98A2AE;}
.ct-mes{background:#F5F8FC !important; font-weight:bold;}
tr.ct-linea th, tr.ct-linea td{border-top:2px solid var(--navy);}
.ct-tot{font-weight:bold; color:var(--navy); font-size:13px;}
.ct-canje{font-size:12px; color:#22303F; line-height:1.35;}
.ct-acomp{background:var(--badbg) !important; color:#8A2F28;}
.ct-pie{font-size:12px; color:#4A5563; line-height:1.55; margin:8px 0 0;}
@media (max-width:700px){ .ct-th, .ct-comp{width:150px;} .ct-comp small{display:none;} }


/* Un componente sin aporte este mes sigue a la vista y con su color: es lo que
   queda por conseguir, no algo que no exista. Se distingue por la marca del mes,
   no atenuando la fila, que lo volveria invisible. */
tr.ct-pend .ct-mes{background:#FCF6EA !important;}


/* ---- Marco metodologico ---- */

/* ================= PORTADA =================
   Calida y con aire, porque el lector llega a la defensiva y por el telefono.
   Nada de tablas antes de que entienda que le conviene. */

.hint.centro{text-align:center; max-width:640px; margin:0 auto 18px;}

.tarjeta.no-hace{border-top-color:#8FA0B4;}
.tarjeta.no-hace h3{font-size:15px;}




.cierre .hint{color:#DCE6F2; margin-top:12px;}

/* La navegacion separa el recorrido del docente del trabajo de diseno. */
nav.sitio a.nav-tec{opacity:.72; font-weight:normal;}
nav.sitio a.nav-tec[aria-current="page"]{opacity:1;}

@media (max-width:720px){
  .hero{padding:38px 18px 34px;}
  .hero h1{font-size:26px;}
  .hero-bajada{font-size:15px;}
  .cambio-flecha{transform:rotate(90deg); justify-self:center;}
  .franja{margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px;}
}


/* El escenario deja de ser el de ejemplo en cuanto se ajusta algo. */
.res-esc.ajust{background:rgba(255,230,184,.2);}
.res-esc.ajust b{color:#FFE6B8;}


/* ---- Generador de escenarios ---- */
.sim-gen{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-left:auto;}
.sim-sem{font-size:12px; color:var(--gris);}
.sim-aviso{font-size:12px; color:var(--bad); font-weight:bold;}
/* Un componente sin aporte sigue a la vista: es lo que queda por conseguir. */
.ct-porlograr{color:var(--amber-txt); font-weight:bold; font-size:12px; white-space:nowrap;}