/* Competencias · todo acotado a .mod-competencias (el CSS de los módulos choca
   entre sí). Excepción a la regla monocromo de tokens.css, pedida por Marco el
   30-oct-2026: tarjetas redondeadas y nivel de autorización en pastel
   (4 especialista verde, 3 autónomo azul, 2 supervisado ámbar, — no autorizado rojo).
   Los colores viven SOLO en las variables de abajo. */

.mod-competencias {
  --cp-fondo:#f5f5f4; --cp-borde:#e7e7e5; --cp-radio:18px;
  --cp-n4:#e2ece5; --cp-n4-t:#2f6b4c; --cp-n4-p:#5f9a76;
  --cp-n3:#e5e9f6; --cp-n3-t:#34509a; --cp-n3-p:#6787d6;
  --cp-n2:#f7eddd; --cp-n2-t:#8a5d17; --cp-n2-p:#dcae5c;
  --cp-n0:#f6e5e4; --cp-n0-t:#a3413c; --cp-n0-p:#cf6a63;
  --cp-verde:#e4f1e5; --cp-verde-t:#2f7d3b;
}

.mod-competencias .marca { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.mod-competencias .escudo {
  width:56px; height:56px; border-radius:16px; background:var(--cp-fondo);
  display:grid; place-items:center; flex-shrink:0;
}
.mod-competencias .kinos { font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.05; }
.mod-competencias .sub { color:var(--meta); font-size:15px; letter-spacing:.01em; }
.mod-competencias .marca .pastilla { margin-left:auto; }

.mod-competencias .pastilla {
  display:inline-block; border-radius:999px; padding:5px 14px; font-size:14px; font-weight:500; white-space:nowrap;
}
.mod-competencias .p-verde { background:var(--cp-verde); color:var(--cp-verde-t); }
.mod-competencias .p-rojo { background:var(--cp-n0); color:var(--cp-n0-t); }
.mod-competencias .p-gris { background:var(--cp-borde); color:var(--meta); }

.mod-competencias .rejilla { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.mod-competencias .tarjeta { background:var(--cp-fondo); border-radius:var(--cp-radio); padding:22px 24px 24px; min-width:0; }
.mod-competencias .t-top { display:flex; justify-content:space-between; align-items:flex-start; color:var(--meta); font-size:15px; }
.mod-competencias .tarjeta .cifra { font-size:clamp(40px,5vw,60px); font-weight:650; letter-spacing:-.03em; line-height:1; margin-top:22px; }
.mod-competencias .tarjeta .nota { font-size:13px; color:var(--meta); margin-top:10px; }

.mod-competencias .aviso { margin-top:14px; font-size:13px; border-radius:12px; background:var(--cp-n2); color:var(--cp-n2-t); padding:8px 12px; }

.mod-competencias .pestanas {
  display:flex; flex-direction:row; border-right:0; width:max-content; max-width:100%; gap:4px; margin-top:26px; padding:4px; border-radius:999px; background:var(--cp-fondo); overflow-x:auto;
}
.mod-competencias .pestanas button {
  font:inherit; font-size:14px; font-weight:500; background:none; color:var(--meta);
  border:0; border-radius:999px; padding:8px 16px; cursor:pointer;
}
.mod-competencias .pestanas button.activa { background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.mod-competencias .vista { padding-top:18px; }
.mod-competencias .vista h2 { margin:18px 0 8px; font-size:20px; font-weight:600; text-transform:none; letter-spacing:-.01em; }
.mod-competencias .vista h3 { margin:16px 0 6px; }

.mod-competencias .m-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 14px; }
.mod-competencias .m-cab h2 { margin:0; }
.mod-competencias .chips { display:flex; gap:6px; flex-wrap:wrap; }
.mod-competencias .chip {
  font:inherit; font-size:14px; font-weight:500; border:0; border-radius:999px; padding:6px 14px;
  background:var(--cp-fondo); color:var(--meta); cursor:pointer;
}
.mod-competencias .chip.activa { color:var(--ink); background:var(--cp-borde); }

.mod-competencias .desliza { overflow-x:auto; }
.mod-competencias .matriz { border-collapse:collapse; font-size:14px; width:100%; }
.mod-competencias .matriz th, .mod-competencias .matriz td {
  border-bottom:1px solid var(--cp-borde); padding:12px 8px; text-align:center; vertical-align:middle;
}
.mod-competencias .matriz thead th { font-size:13px; font-weight:400; color:var(--meta); }
.mod-competencias .matriz .eq { text-align:left; min-width:170px; }
.mod-competencias .matriz th.eq b { font-weight:500; font-size:15px; }
.mod-competencias .matriz th.eq span { display:block; font-weight:400; font-size:13px; color:var(--meta); margin-top:2px; }
.mod-competencias .matriz .op { min-width:92px; max-width:120px; line-height:1.25; }
.mod-competencias .matriz td.bajo { color:var(--ink); font-weight:600; text-decoration:underline; }
.mod-competencias .matriz td.num { text-align:left; }

.mod-competencias .cel {
  font:inherit; font-size:15px; width:46px; height:46px; border-radius:14px; border:2px solid transparent;
  cursor:pointer; font-variant-numeric:tabular-nums;
}
.mod-competencias .cel.n4 { background:var(--cp-n4); color:var(--cp-n4-t); }
.mod-competencias .cel.n3 { background:var(--cp-n3); color:var(--cp-n3-t); }
.mod-competencias .cel.n2 { background:var(--cp-n2); color:var(--cp-n2-t); }
.mod-competencias .cel.n0 { background:var(--cp-n0); color:var(--cp-n0-t); }
.mod-competencias .cel.n- { background:var(--cp-fondo); color:var(--meta); }
.mod-competencias .cel:hover, .mod-competencias .cel.sel { border-color:var(--cp-n4-p); }

.mod-competencias .leyenda { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:14px; color:var(--meta); margin:16px 0 20px; }
.mod-competencias .leyenda .pt { width:11px; height:11px; border-radius:50%; display:inline-block; margin-left:14px; }
.mod-competencias .leyenda .pt:first-child { margin-left:0; }
.mod-competencias .pt.n4 { background:var(--cp-n4-p); }
.mod-competencias .pt.n3 { background:var(--cp-n3-p); }
.mod-competencias .pt.n2 { background:var(--cp-n2-p); }
.mod-competencias .pt.n0 { background:var(--cp-n0-p); }

.mod-competencias .detalle { background:var(--cp-fondo); border-radius:var(--cp-radio); padding:20px 24px; border-top:0; }
.mod-competencias .detalle:empty { display:none; }
.mod-competencias .d-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.mod-competencias .d-cab h3 { margin:0; font-size:20px; font-weight:600; }
.mod-competencias .detalle p { color:var(--meta); font-size:15px; margin-top:6px; }
.mod-competencias .detalle .pie { font-size:13px; margin-top:12px; }
.mod-competencias .faltan { list-style:none; font-size:14px; color:var(--meta); }

.mod-competencias .lista { list-style:none; font-size:14px; }
.mod-competencias .lista li { padding:8px 0; border-bottom:1px solid var(--cp-borde); }
.mod-competencias .lista a { color:var(--ink); }

.mod-competencias .filtros { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.mod-competencias .filtros label { display:flex; flex-direction:column; gap:4px; }
.mod-competencias .filtros select {
  font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--cp-borde); border-radius:12px;
  background:var(--paper); color:var(--ink); min-width:200px;
}

@media (max-width:700px) {
  .mod-competencias .rejilla { gap:10px; }
  .mod-competencias .tarjeta { padding:16px; }
  .mod-competencias .kinos { font-size:28px; }
  .mod-competencias .marca .pastilla { display:none; }
}