/* backoffice/_list_fragment.html — divintech.es toolbar: tinted search box
   with an icon, then rounded Añadir / Modificar / Eliminar buttons, and the
   "Mostrar [n] filas" selector.

   From 40rem: Añadir is the only filled button, Modificar / Eliminar are
   outlined (blue / red) and look unavailable (still focusable, aria-disabled)
   until the right number of rows is checked; "2 filas marcadas" sits next to
   them, and the live result count ("24 resultados, página 1 de 3, ordenado
   por…") is visible in place of the usage hint. Phones keep their layout. */

.bo-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.bo-search {
  display: flex;
  flex: 1 1 18rem;
  align-items: stretch;
}

.bo-search__icon {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border-bottom: 2px solid var(--color-main);
  border-radius: var(--radius) 0 0;
  background: var(--color-accent-soft);
  color: var(--color-main);
}

.bo-search .bo-search__input {
  padding-left: 0.25rem;
  border-radius: 0 var(--radius) 0 0;
}

.bo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bo-actions .button {
  min-width: 8.5rem;
}

.bo-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-1);
}

.bo-list__meta select {
  width: auto;
  min-height: 2.5rem;
  padding: 0.3rem 0.6rem;
}

.bo-list__hint {
  margin: 0 0 0 auto;
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Screen-reader only on phones (as .visually-hidden), visible from 40rem. */
.bo-list__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phones: search on its own line, then Añadir / Modificar / Eliminar as
   three equal buttons on one row (the word drops under its icon if it
   doesn't fit beside it), and the hint under "Mostrar n filas". */
@media (max-width: 39.99rem) {
  .bo-search {
    flex-basis: 100%;
  }

  .bo-actions {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    width: 100%;
  }

  .bo-actions .button {
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
    min-width: 0;
    padding: 0.4rem 0.35rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    text-align: center;
  }

  /* Not a fourth grid column: the count only describes the buttons here. */
  .bo-selection {
    display: none;
  }

  .bo-list__hint {
    flex-basis: 100%;
    margin: 0;
  }
}

/* Very narrow (320px / 400% zoom): every action shows its icon above the
   word, so the three buttons stay alike. */
@media (max-width: 22.5rem) {
  .bo-actions .button {
    flex-direction: column;
  }
}

/* --- From 40rem ---------------------------------------------------------------- */
@media (min-width: 40rem) {
  /* The search box no longer stretches across a wide screen. */
  .bo-search {
    flex: 0 1 30rem;
  }

  .bo-actions {
    align-items: center;
    margin-left: auto;
  }

  /* Modificar / Eliminar: the mobile card buttons as pills — outlined, blue
     or red; Añadir keeps the teal fill and is the one filled button. */
  .bo-action--edit,
  .bo-action--delete {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-main);
  }

  .bo-action--delete {
    color: var(--color-danger);
  }

  .bo-action--edit:hover {
    border-color: currentColor;
    background: var(--color-main-soft);
    color: var(--color-main);
  }

  .bo-action--delete:hover {
    border-color: currentColor;
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  /* Not enough rows checked: grey, but still focusable/clickable (the
     notice explains what to do) and still AA on white. */
  .bo-action[aria-disabled="true"],
  .bo-action[aria-disabled="true"]:hover {
    border-color: var(--color-border);
    background: var(--color-bg);
    color: var(--color-muted);
  }

  .bo-action--add {
    margin-right: 0.5rem;
  }

  .bo-selection {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .bo-list__hint {
    display: none;
  }

  .bo-list__status {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    overflow: visible;
    clip-path: none;
    color: var(--color-muted);
    font-size: 0.875rem;
    white-space: normal;
  }
}