/* ============================================================
   MARCA · estilos de las pestañas Voz, Términos y Empresa
   Viven adentro de la vista Branding (<section id="vista-branding">), así que reusan el
   chasis de branding.css: .br-sec para los subtítulos, .br-panel para el contenedor,
   .field/.field-hint del <style> de index.html. Acá va solo lo propio de estas tres.

   Solo tokens de /tokens.css — cero hex hardcodeado. `.on` para "seleccionado", nunca
   `.sel` (design/ARQUITECTURA-PANTALLA.md).

   Los colores por tipo de término salen de tres tokens que ya significan lo mismo en el
   resto de la app: turquesa = confirmado, ámbar = ojo con esto, rojo = no. Así el pill de
   "no va" del banco y el <mark> del linter no son dos vocabularios distintos.
   ============================================================ */

/* ---------- bloques de texto explicativo ---------- */

/* La nota de cabecera de cada pestaña carga el argumento del módulo. Se lee una vez y
   después se ignora, así que va tenue y sin borde de alarma: no es un aviso. */
.mk-nota{
  border-left:2px solid var(--turquesa-line); background:var(--s1);
  padding:9px 12px; margin-bottom:14px;
  font-size:11.5px; line-height:1.5; color:var(--ink-2);
}
.mk-nota b{ color:var(--ink); font-weight:600; }
.mk-tenue{ color:var(--ink-3); font-size:10.5px; font-weight:400; }
/* .spacer se define una sola vez en /base.css (con .cr-sp, .mk-sp y .fb-spacer como alias). */
.mk-vacio{ color:var(--ink-3); font-size:11.5px; padding:6px 2px; }

.mk-acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0; }
.mk-acciones-pie{
  border-top:1px solid var(--line); padding-top:12px; margin-top:18px;
  position:sticky; bottom:0; background:var(--s2);
}

.mk-det{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 12px; margin-top:18px; background:var(--s1);
}
.mk-det > summary{
  cursor:pointer; font-size:11.5px; color:var(--ink-2);
  letter-spacing:.02em; padding:2px 0;
}
.mk-det[open] > summary{ color:var(--ink); border-bottom:1px solid var(--line-soft); margin-bottom:10px; }

.mk-pre{
  font-family:var(--f-mono); font-size:11px; line-height:1.5; color:var(--ink-2);
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; max-height:320px; overflow:auto; white-space:pre-wrap;
  word-break:break-word; margin:0;
}

/* ---------- VOZ · estado del enlace de .claude/brand_voice.md ---------- */

/* No es un detalle de infraestructura escondido en un ícono: si el enlace no está, el
   pipeline lee otra voz que la de esta pantalla, y eso se siente como "guardé y no pasó
   nada". Por eso ocupa una fila entera arriba de todo. */
.mk-enlace{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 12px; margin-bottom:14px; font-size:11.5px; line-height:1.45;
  color:var(--ink-2);
}
.mk-enlace > div{ flex:1; min-width:220px; }
.mk-enlace code{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink); }
.mk-enlace.ok{ border-color:var(--turquesa-line); background:var(--turquesa-dim); }
.mk-enlace.mal{ border-color:var(--rojo); background:var(--s1); }
.mk-enlace.mal b{ color:var(--rojo-ink); }
.mk-enlace[hidden]{ display:none; }

/* ---------- VOZ · canales ---------- */

.mk-canales{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
.mk-canal{
  text-align:left; background:var(--s2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; color:var(--ink-2); cursor:pointer;
}
.mk-canal:hover{ border-color:var(--ink-3); }
.mk-canal.on{ border-color:var(--turquesa); background:var(--turquesa-dim); }
.mk-canal-label{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:4px; }
.mk-canal-estado{ display:flex; flex-direction:column; gap:2px; }

/* El contador de palabras contra el rango es el argumento del apartado hecho pixel: no se
   recorta por plata, se recorta por obediencia. Verde es "entra", ámbar es "el modelo lo
   va a cumplir a medias". */
.mk-pal{
  font-family:var(--f-mono); font-size:11px; color:var(--turquesa-ink);
}
.mk-pal.mk-fuera{ color:var(--ambar-ink); }

.mk-editor{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:12px 14px; margin-top:14px;
}
.mk-editor-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid var(--line-soft);
  font-size:13px; color:var(--ink);
}
.mk-medidor{
  font-family:var(--f-mono); font-size:10.5px; padding:3px 8px;
  border-radius:var(--r-xs); border:1px solid var(--line); color:var(--ink-3);
}
.mk-medidor.mk-ok{ color:var(--turquesa-ink); border-color:var(--turquesa-line); background:var(--turquesa-dim); }
.mk-medidor.mk-fuera{ color:var(--ambar-ink); border-color:var(--ambar); background:var(--ambar-dim); }

.mk-ejemplo{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--s1); padding:9px 11px; margin-bottom:8px;
}
.mk-ejemplo-head{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:6px;
}

/* ---------- VOZ · prompt y bloque ---------- */

.mk-prompt{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s1);
  padding:10px 12px; margin-top:12px;
}
.mk-prompt-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--ink); margin-bottom:8px;
}
.mk-barra{
  height:5px; border-radius:var(--r-xs); background:var(--s3);
  overflow:hidden; margin-bottom:8px;
}
.mk-barra-in{ height:100%; background:var(--turquesa); }

/* ---------- listas de a uno ---------- */

.mk-lista-items{ display:flex; flex-direction:column; gap:5px; }
.mk-li{ display:flex; gap:5px; align-items:center; }
.mk-li input{ flex:1; min-width:0; }
.mk-li-x{
  flex:none; width:26px; height:26px; padding:0; line-height:1;
  color:var(--ink-3); font-size:15px;
}
.mk-li-x:hover{ color:var(--rojo-ink); border-color:var(--rojo); }
.mk-lista-mas{ margin-top:6px; font-size:11.5px; padding:4px 10px; }

.mk-lista-bloque{ margin-bottom:14px; }
.mk-lista-label{
  display:flex; align-items:baseline; gap:8px;
  font-size:11px; color:var(--ink-2); margin-bottom:2px;
}

/* ---------- TÉRMINOS ---------- */

.mk-alta{
  display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:10px 12px; margin-bottom:4px;
}
.mk-alta .field{ flex:1 1 160px; min-width:0; margin-bottom:0; }
.mk-alta > button{ flex:none; }

.mk-grupo{ margin-top:16px; }
.mk-grupo-head{ display:flex; align-items:center; gap:8px; }
.mk-grupo-items{ margin-top:7px; display:flex; flex-direction:column; gap:5px; }

/* El pill del tipo y el <mark> del linter comparten paleta a propósito: lo que en el banco
   se ve ámbar tiene que verse ámbar cuando aparece resaltado en un texto. */
.mk-pill{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  border-radius:var(--r-xs); padding:2px 7px; white-space:nowrap;
  border:1px solid var(--line); color:var(--ink-2);
}
.mk-pill.mk-tipo-aprobado{ color:var(--turquesa-ink); border-color:var(--turquesa-line); background:var(--turquesa-dim); }
.mk-pill.mk-tipo-no-usar{ color:var(--rojo-ink); border-color:var(--rojo); }
.mk-pill.mk-tipo-usar-con-cuidado{ color:var(--ambar-ink); border-color:var(--ambar); background:var(--ambar-dim); }
.mk-pill.mk-tipo-pendiente{ color:var(--ink-3); }

.mk-term{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--s2); padding:7px 10px;
}
.mk-term-cab{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mk-term-txt{ font-family:var(--f-mono); font-size:12px; color:var(--ink); }
.mk-term-cab button{ font-size:11px; padding:3px 8px; }
.mk-flecha{ font-family:var(--f-mono); font-size:11px; color:var(--turquesa-ink); }
.mk-term-desc{ font-size:10.5px; color:var(--ink-3); line-height:1.4; margin-top:3px; }
.mk-term-edit{ background:var(--s3); border-color:var(--line); padding:10px 12px; }
.mk-check{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--ink-2); margin:6px 0;
}
.mk-check input{ width:auto; }

/* ---------- el probador del linter ---------- */

.mk-lint-cols{ display:flex; gap:var(--gut); align-items:flex-start; flex-wrap:wrap; margin-top:6px; }
.mk-lint-col{ flex:1 1 320px; min-width:0; }

.mk-resaltado{
  font-family:var(--f-mono); font-size:11px; line-height:1.6; color:var(--ink-2);
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; max-height:220px; overflow:auto;
  white-space:pre-wrap; word-break:break-word;
}
.mk-resaltado mark{
  background:transparent; color:var(--ink); border-bottom:2px solid var(--ink-3);
  padding:0 1px; border-radius:2px;
}
.mk-resaltado mark.mk-tipo-aprobado{ border-bottom-color:var(--turquesa); }
.mk-resaltado mark.mk-tipo-no-usar{ border-bottom-color:var(--rojo); background:var(--s3); }
.mk-resaltado mark.mk-tipo-usar-con-cuidado{ border-bottom-color:var(--ambar); }
.mk-resaltado mark.mk-tipo-pendiente{ border-bottom-color:var(--ink-3); }

.mk-hallazgos{ margin-top:9px; display:flex; flex-direction:column; gap:5px; }
.mk-hallazgo{
  border:1px solid var(--line-soft); border-left-width:2px; border-radius:var(--r-sm);
  background:var(--s2); padding:6px 10px;
}
.mk-hallazgo.mk-tipo-no-usar{ border-left-color:var(--rojo); }
.mk-hallazgo.mk-tipo-aprobado{ border-left-color:var(--turquesa); }
.mk-hallazgo.mk-tipo-usar-con-cuidado{ border-left-color:var(--ambar); }
.mk-hallazgo-cab{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mk-hallazgo-cab code{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink); }

/* ---------- EMPRESA ---------- */

/* Los huecos no son errores: son huecos. Por eso ámbar y no rojo, y por eso el encabezado
   dice qué le falta al perfil en vez de "campos obligatorios". */
.mk-faltan{
  border:1px solid var(--ambar); background:var(--ambar-dim); border-radius:var(--r-sm);
  padding:9px 12px; margin-bottom:14px; font-size:11.5px; color:var(--ink-2); line-height:1.45;
}
.mk-faltan.ok{ border-color:var(--turquesa-line); background:var(--turquesa-dim); }
.mk-faltan b{ color:var(--ink); }
.mk-faltan ul{ margin:5px 0 0; padding-left:18px; }
.mk-faltan li{ margin:2px 0; }
.mk-faltan[hidden]{ display:none; }

.mk-vocero{
  display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--s2); padding:9px 11px; margin-bottom:6px;
}
.mk-vocero .field{ flex:1 1 130px; min-width:0; margin-bottom:0; }
.mk-vocero .mk-vocero-reg{ flex:2 1 240px; }
.mk-vocero > .mk-li-x{ align-self:center; }

/* Mostrar la consecuencia y no el campo: es lo único que hace evidente que el género quedó
   mal cargado antes de que salga escrito en cincuenta piezas. */
.mk-colectivo{
  border-left:2px solid var(--ambar); background:var(--s1);
  padding:7px 11px; margin-top:4px;
  font-size:11.5px; line-height:1.45; color:var(--ink-2);
}
.mk-colectivo b{ color:var(--ink); }

@media (max-width: 780px){
  .mk-alta .field{ flex-basis:100%; }
  .mk-vocero .field{ flex-basis:100%; }
}