/*
 * Aprentix · piezas compartidas de UI (chips, etiquetas, listas de check,
 * badges).
 *
 * Antes vivían en web/site/style.css; ahora también las usa teoría a
 * través del mismo CSS para que el aspecto no divergja entre secciones.
 */


/* ─── Tags (contenedor + chip semántico) ──────────────────────────────── */
.tags {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  min-width: 0; max-width: 100%;
}
.tag {
  background: var(--pri-soft); color: var(--pri-d);
  padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.tag.removable {
  cursor: default;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.tag.removable .x {
  cursor: pointer; opacity: 0.55; font-weight: 700; line-height: 1;
  padding: 0 0.15rem;
}
.tag.removable .x:hover { opacity: 1; color: var(--danger); }


/* ─── Editor de etiquetas (chips + input "+ añadir") ──────────────────────
 * Se usa en la ficha de un test y en el editor de una pregunta. Antes
 * cada sitio lo pintaba distinto (el editor cogía los estilos genéricos
 * de `.modal input`, la ficha del test se quedaba con los del navegador),
 * así que la fila de etiquetas se veía muy diferente entre ambos. Ahora
 * comparten `.tag-editor`: chips arriba y un input píldora ancho debajo.
 */
.tag-editor {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.tag-editor .tags { min-height: 0; }
/* Cualificamos con [list] para ganarle en especificidad a `.modal input`
 * (tests/style.css), que si no pisaría el border-radius píldora cuando el
 * editor de etiquetas se usa dentro de un modal (editor de pregunta). */
.tag-editor input,
.tag-editor input[list] {
  display: block; width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel); color: var(--txt);
  font-family: inherit; font-size: 0.85rem;
  outline: none;
  margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tag-editor input:focus,
.tag-editor input[list]:focus {
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-glow, var(--pri-soft));
}


/* ─── Tag chips (filtros clickables) ──────────────────────────────────── */
.tag-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin: 0 0 0.8rem;
}
.tag-chips .chip {
  background: var(--bg-panel); border: 1px solid var(--border);
  padding: 0.35rem 0.85rem; border-radius: 999px;
  font-size: 0.85rem; cursor: pointer; color: var(--txt);
  min-height: 34px;
  display: inline-flex; align-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.tag-chips .chip:hover:not(.active) {
  border-color: var(--pri);
  background: var(--pri-soft);
}
.tag-chips .chip:active { transform: scale(0.95); }
.tag-chips .chip.active {
  background: var(--pri); color: #fff; border-color: var(--pri);
}
[data-theme="dark"] .tag-chips .chip.active { color: #14241D; }


/* ─── Lista de checkboxes (pickers de oposiciones, tests…) ────────────── */
.check-list {
  list-style: none; padding: 0; margin: 0.5rem 0 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  max-height: 55vh; overflow-y: auto;
}
.check-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  cursor: pointer;
  color: var(--txt);
  font-family: inherit;
  text-align: left;
  width: 100%;
}
button.check-item { background: transparent; }
.check-item:hover { border-color: var(--pri); background: var(--pri-soft); }
.check-item input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--pri);
  margin: 0;
  flex: 0 0 auto;
}
.check-item span { min-width: 0; }
.check-item[aria-current="true"] {
  border-color: var(--pri);
  background: var(--pri-soft);
}
.check-item[aria-current="true"] strong { color: var(--pri-d); }
[data-theme="dark"] .check-item[aria-current="true"] strong { color: var(--pri); }


/* ─── Tarjeta de oposición dentro del selector (ap-op-selector) ────────
 * Cada oposición se muestra como una tarjeta más cálida y "amigable":
 * icono a la izquierda, título + descripción a la derecha y un check
 * verde cuando está activa. Antes era solo texto plano sobre el fondo
 * esmerilado y no se distinguían las opciones entre sí.
 */
.op-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.op-card:hover {
  transform: translateY(-1px);
  border-color: var(--pri);
  background: linear-gradient(160deg, var(--pri-soft) 0%, var(--bg-panel) 60%);
  box-shadow: var(--shadow);
}
.op-card[aria-current="true"] {
  border-color: var(--pri);
  background: linear-gradient(160deg, var(--pri-soft) 0%, var(--bg-panel) 70%);
}
.op-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  font-size: 1.35rem;
  background: var(--accent-soft);
  color: var(--accent-d);
  flex: 0 0 auto;
}
.op-card:nth-child(5n+2) .op-card-ico { background: var(--sky-soft);      color: var(--sky-d); }
.op-card:nth-child(5n+3) .op-card-ico { background: var(--lavender-soft); color: var(--lavender-d); }
.op-card:nth-child(5n+4) .op-card-ico { background: var(--coral-soft);    color: var(--coral-d); }
.op-card:nth-child(5n)   .op-card-ico { background: var(--leaf-soft);     color: var(--pri-d); }
[data-theme="dark"] .op-card-ico { color: var(--accent); }
[data-theme="dark"] .op-card:nth-child(5n+2) .op-card-ico { color: var(--sky); }
[data-theme="dark"] .op-card:nth-child(5n+3) .op-card-ico { color: var(--lavender); }
[data-theme="dark"] .op-card:nth-child(5n+4) .op-card-ico { color: var(--coral); }
[data-theme="dark"] .op-card:nth-child(5n)   .op-card-ico { color: var(--pri); }
.op-card-body {
  display: flex; flex-direction: column; gap: 0.15rem;
  min-width: 0;
}
.op-card-body strong {
  font-size: 0.98rem; font-weight: 700;
  color: var(--txt);
  overflow: hidden; text-overflow: ellipsis;
}
.op-card-body .check-item-desc {
  font-size: 0.8rem; color: var(--txt-soft);
  line-height: 1.35;
}
.op-card-check {
  color: var(--pri-d);
  font-weight: 800;
  font-size: 1.1rem;
  flex: 0 0 auto;
}
[data-theme="dark"] .op-card-check { color: var(--pri); }


/* ─── Input de archivo (subir test, importar etiquetas…) ─────────────────
 * El file input nativo se ve muy inconsistente entre navegadores. Damos
 * al control un aspecto de "chip + botón" alineado con el resto de la
 * UI: fondo panel, borde suave, botón interior estilo secundario, y
 * halo verde al enfocarlo. */
input[type="file"]:not([hidden]) {
  display: inline-flex;
  align-items: center;
  padding: 0;
  min-height: 46px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--txt);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input[type="file"]:not([hidden]):hover {
  border-color: var(--pri);
  background: color-mix(in srgb, var(--pri-soft) 55%, var(--bg-panel));
}
input[type="file"]:not([hidden]):focus-visible {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 4px var(--pri-glow);
}
/* Mismo look que .btn-primary: fondo sólido --pri, texto blanco, sin
 * gradiente. Hover pasa a --pri-d, coherente con el resto de botones. */
input[type="file"]::file-selector-button {
  padding: 0.7rem 1rem;
  margin-right: 0.7rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--pri);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s;
}
input[type="file"]::-webkit-file-upload-button {
  padding: 0.7rem 1rem;
  margin-right: 0.7rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--pri);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
input[type="file"]:hover::file-selector-button {
  background: var(--pri-d);
}
input[type="file"]:hover::-webkit-file-upload-button {
  background: var(--pri-d);
}
[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
  color: #14241D;
  background: var(--pri);
  border-right-color: color-mix(in srgb, var(--pri) 30%, transparent);
}
[data-theme="dark"] input[type="file"]:hover::file-selector-button,
[data-theme="dark"] input[type="file"]:hover::-webkit-file-upload-button {
  background: var(--pri-d);
  color: #fff;
}


/* ─── Badge (contador circular al lado de un botón) ───────────────────── */
.badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.1em 0.5em;
  margin-left: 0.35em;
  border-radius: 999px;
  background: var(--accent);
  color: #3B2A0F;
  font-size: 0.75em;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
[data-theme="dark"] .badge { color: #14241D; }
.badge.calma { background: var(--txt-soft); color: var(--bg); }