/* =============================================================================
   Utiliobox — estilos propios del contador de palabras.
   Solo tokens de utiliobox.css. Reutiliza field, select, input, btn, progress
   y notice del sistema compartido; aquí solo vive lo de esta herramienta.
   ============================================================================= */

/* --- Contadores, encima del área de texto --- */
.wc-metrics {
  display: grid; gap: 1px;
  grid-template-columns: repeat(6, 1fr);
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.wc-metric {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-4) var(--s-2);
  background: var(--surface);
  text-align: center; min-width: 0;
}
.wc-metric__value {
  font-family: var(--mono); font-size: var(--fs-2xl); font-weight: var(--fw-medium);
  color: var(--ink); line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.wc-metric__label {
  font-size: var(--fs-2xs); color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .06em;
  overflow-wrap: anywhere;
}

/* --- Barra de la entrada --- */
.wc-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.wc-bar__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wc-detected { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ok); }

/* --- Área de texto --- */
.wc-area {
  width: 100%; min-height: 300px; resize: vertical;
  padding: var(--s-5);
  border: 0; background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-md); line-height: 1.7;
  display: block;
}
.wc-area:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.wc-area::placeholder { color: var(--ink-mute); }

/* --- Paneles --- */
.wc-panels {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--border);
  border-top: 1px solid var(--border);
}
.wc-panel { padding: var(--s-5); background: var(--surface); min-width: 0; }
.wc-panel__title {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 var(--s-3);
}
.wc-panel__title--sep { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.wc-note { font-size: var(--fs-2xs); color: var(--ink-mute); line-height: 1.5; margin-top: var(--s-3); }
.wc-empty { font-size: var(--fs-sm); color: var(--ink-mute); }

/* --- Tiempos de lectura --- */
.wc-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.wc-time {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.wc-time__label { font-size: var(--fs-2xs); color: var(--ink-mute); }
.wc-time__value {
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wc-time__rate { font-size: var(--fs-2xs); color: var(--ink-mute); }

/* --- Límite --- */
.wc-limit { display: grid; gap: var(--s-3); }
.wc-limit__custom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.wc-progress { margin-top: var(--s-4); }
/* El color de la barra dice a qué distancia estás sin tener que leer nada. */
.wc-progress[data-state="near"] .progress__fill { background: var(--warn); }
.wc-progress[data-state="over"] .progress__fill { background: var(--danger); }
.wc-progress[data-state="near"] .progress__meta b { color: var(--warn); }
.wc-progress[data-state="over"] .progress__meta b { color: var(--danger); }

/* --- Palabras clave --- */
.wc-kw__counted { font-size: var(--fs-2xs); color: var(--ink-mute); margin-bottom: var(--s-2); font-family: var(--mono); }
.wc-kw__table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.wc-kw__table th {
  text-align: left; padding: var(--s-1) var(--s-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.wc-kw__table td { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--border); position: relative; }
.wc-kw__table tr:last-child td { border-bottom: 0; }
.wc-kw__num { text-align: right; font-family: var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Una barra de fondo detrás de la palabra: la proporción se ve sin leer cifras. */
.wc-kw__bar {
  position: absolute; left: 0; top: 2px; bottom: 2px;
  background: var(--accent-soft); border-radius: var(--r-xs);
  pointer-events: none;
}
.wc-kw__word { position: relative; color: var(--ink); overflow-wrap: anywhere; }

/* --- Legibilidad --- */
.wc-score { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.wc-score__value {
  font-family: var(--mono); font-size: var(--fs-3xl); font-weight: var(--fw-medium);
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wc-score__level { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-soft); }
.wc-score[data-level="veryEasy"] .wc-score__value,
.wc-score[data-level="easy"] .wc-score__value,
.wc-score[data-level="fairlyEasy"] .wc-score__value { color: var(--ok); }
.wc-score[data-level="standard"] .wc-score__value { color: var(--accent); }
.wc-score[data-level="fairlyHard"] .wc-score__value { color: var(--warn); }
.wc-score[data-level="hard"] .wc-score__value,
.wc-score[data-level="veryHard"] .wc-score__value { color: var(--danger); }
.wc-scorebar { margin-bottom: var(--s-3); }
.wc-rd__detail { font-size: var(--fs-xs); color: var(--ink-soft); font-family: var(--mono); }

/* --- Responsive --- */
@media (max-width: 1023px) {
  .wc-panels { grid-template-columns: 1fr; }
  .wc-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 719px) {
  .wc-bar__end { margin-left: 0; width: 100%; }
  .wc-area { min-height: 220px; padding: var(--s-4); }
  .wc-metric { padding: var(--s-3) var(--s-1); }
  .wc-metric__value { font-size: var(--fs-xl); }
}
@media (max-width: 539px) {
  /* Tres columnas y no dos: con dos, los contadores ocupan tres filas y
     empujan el área de texto fuera de la pantalla en un móvil normal. */
  .wc-metrics { grid-template-columns: repeat(3, 1fr); }
  .wc-metric { padding: var(--s-2) 2px; }
  .wc-metric__value { font-size: var(--fs-lg); }
  .wc-metric__label { font-size: 10px; letter-spacing: .03em; }
  .wc-times, .wc-limit__custom { grid-template-columns: 1fr; }
  .wc-panel { padding: var(--s-4); }
  .wc-bar { padding-inline: var(--s-3); gap: var(--s-2); }
  .wc-area { min-height: 190px; }
}

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#wc-tool { --alto-herramienta: 806px; }