/*!
 * grafem-controles.css — alturas de control, iconos en círculo, contadores y etiquetas de estado.
 * Cárgalo después de grafem-app.css (zona privada) y de grafem-public.css (web pública).
 *
 * Regla de fondo: dentro de un círculo nunca va un carácter de texto (+, ×, i, ›, números
 * sueltos con line-height heredado). Los iconos son máscaras SVG centradas geométricamente y
 * los números usan line-height: 1 con cifras tabulares. Así no se descolocan hacia abajo.
 */

:root {
  --control-h: 40px;        /* inputs, selects y botones de formulario */
  --control-h-sm: 32px;     /* botones secundarios pequeños, chips */
  --icon-btn: 28px;         /* botones redondos de icono */

  --i-plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-info:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.4' r='1.35'/%3E%3Cpath d='M8 7.2v5.2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-chev:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-help:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.6 5.8a2.5 2.5 0 1 1 3.6 2.2c-.8.4-1.2.9-1.2 1.7v.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12.6' r='1.15'/%3E%3C/svg%3E");
}

/* ---------- 1. Icono en círculo -------------------------------------------------------- */
/* <button class="gf-icon-btn" data-icon="info" aria-label="Más información"></button>
   <span class="gf-icon-dot" data-icon="plus" aria-hidden="true"></span>  (dentro de un summary) */
.gf-icon-btn,
.gf-icon-dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--icon-btn);
  block-size: var(--icon-btn);
  padding: 0;
  border: 1px solid var(--line, #E3DEF2);
  border-radius: 50%;
  background: var(--surface-raised, #fff);
  color: var(--grafem-600, #5B479B);
  font-size: 0;            /* ningún carácter de texto dentro */
  line-height: 0;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.gf-icon-dot { inline-size: 22px; block-size: 22px; cursor: inherit; }
.gf-icon-btn::before,
.gf-icon-dot::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  background: currentColor;
  -webkit-mask: var(--icon, var(--i-info)) center / contain no-repeat;
          mask: var(--icon, var(--i-info)) center / contain no-repeat;
}
.gf-icon-dot::before { inline-size: 12px; block-size: 12px; }
.gf-icon-btn:hover { background: var(--grafem-50, #F6F3FD); border-color: var(--grafem-200, #C7B5F0); }
.gf-icon-btn:focus-visible { outline: none; box-shadow: var(--focus, 0 0 0 3px rgb(126 104 198 / .35)); }
.gf-icon-btn[aria-expanded="true"] { background: var(--grafem-100, #E4DAFA); border-color: var(--grafem-300, #A488E4); }
[data-icon="plus"]  { --icon: var(--i-plus); }
[data-icon="minus"] { --icon: var(--i-minus); }
[data-icon="close"] { --icon: var(--i-close); }
[data-icon="info"]  { --icon: var(--i-info); }
[data-icon="chev"]  { --icon: var(--i-chev); }
[data-icon="down"]  { --icon: var(--i-down); }
[data-icon="help"]  { --icon: var(--i-help); }

/* Desplegables (Búsqueda avanzada…): + cerrado, − abierto. Sustituye a .summary-icon::before { content:"+" } */
details > summary .gf-icon-dot { --icon: var(--i-plus); }
details[open] > summary .gf-icon-dot { --icon: var(--i-minus); }

/* × de los chips de filtro e historial */
.gf-chip-x {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 18px; block-size: 18px; margin-inline: 2px -4px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted, #5E5878);
  font-size: 0; line-height: 0; cursor: pointer;
}
.gf-chip-x::before { content: ""; inline-size: 10px; block-size: 10px; background: currentColor;
  -webkit-mask: var(--i-close) center / contain no-repeat; mask: var(--i-close) center / contain no-repeat; }
.gf-chip-x:hover { background: var(--grafem-100, #E4DAFA); color: var(--ink, #1B1533); }

/* ---------- 2. Contadores (pestañas de Biblioteca, «Clasificación +3»…) ------------------ */
/* <button class="library-section-tab">Mis selecciones <span class="gf-count">3</span></button> */
.gf-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--grafem-100, #E4DAFA);
  color: var(--grafem-700, #4A3A85);
  font: 600 11.5px/1 var(--font-sans, "DM Sans", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  box-sizing: border-box;
}
[aria-current="page"] > .gf-count,
[aria-selected="true"] > .gf-count,
.is-active > .gf-count { background: var(--grafem-600, #5B479B); color: #fff; }
.gf-count:empty, .gf-count[data-n="0"] { display: none; }

/* ---------- 3. Alturas de control ------------------------------------------------------ */
/* Campo de búsqueda + botón Buscar: misma altura, alineados por arriba, sin estirarse */
.gf-searchbar { display: flex; align-items: flex-start; gap: 8px; }
.gf-searchbar > input,
.gf-searchbar > .gf-input { flex: 1; min-inline-size: 0; block-size: 44px; }
.gf-btn,
.gf-searchbar > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  block-size: var(--control-h); padding: 0 16px;
  border-radius: 999px; font: 500 14px/1 var(--font-sans, "DM Sans", system-ui, sans-serif);
  white-space: nowrap; align-self: auto;
}
.gf-searchbar > button { block-size: 44px; padding: 0 20px; }
.gf-btn--sm { block-size: var(--control-h-sm); padding: 0 12px; font-size: 13px; }

/* ---------- 4. Etiquetas de estado de estudio (HEOR) ------------------------------------ */
/* <span class="gf-status gf-status--pending">Sin revisión manual</span> */
.gf-status {
  display: inline-flex; align-items: center; gap: 6px;
  block-size: 22px; padding: 0 8px 0 7px;
  border-radius: 6px;
  font: 500 12px/1 var(--font-sans, "DM Sans", system-ui, sans-serif);
  color: var(--ink-muted, #5E5878);
  background: var(--surface-sunken, #F3EFFC);
  white-space: nowrap;
}
.gf-status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.gf-status--pending  { color: #8A5A00; background: #FFF5E0; }
.gf-status--reviewed { color: #17694A; background: #E3F5EC; }
.gf-status--warning  { color: #A1352B; background: #FDECEA; }
[data-theme="dark"] .gf-status          { background: #231C42; color: #C9C1E6; }
[data-theme="dark"] .gf-status--pending  { background: #3A2E12; color: #F2C66B; }
[data-theme="dark"] .gf-status--reviewed { background: #12352A; color: #7FD8B0; }
[data-theme="dark"] .gf-status--warning  { background: #3D1B19; color: #F4A39A; }