/**
 * @file
 * Styles for the document text search clear button.
 */

/* El botón X se posiciona dentro del div.form-item del input.
   La posición exacta (right) la calcula el JS en función del ancho real del input.
   overflow:visible es necesario para que el tooltip (::before/::after) no quede recortado. */
.document-text-search-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: #016da3;
  font-size: 16px;
  line-height: 1;
  display: none; /* JS lo muestra/oculta */
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  z-index: 10;
  overflow: visible;
}

.document-text-search-clear:hover {
  color: #014f7a;
}

.document-text-search-clear:focus {
  outline: 2px solid #016da3;
  outline-offset: 2px;
  border-radius: 3px;
}

.document-text-search-clear svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ── Tooltip tipo bocadillo ──────────────────────────────────────────────── */

/* Caja del tooltip */
.document-text-search-clear::before {
  content: attr(data-tooltip);
  position: absolute;
  /* Sitúa la caja justo encima del pico: pico bottom=4px + altura pico=8px = 12px */
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #016da3;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

/* Pico/flecha apuntando hacia abajo, pegado a la caja */
.document-text-search-clear::after {
  content: '';
  position: absolute;
  /* La caja empieza a bottom: 100%+20px; el pico debe ir justo debajo de la caja */
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  /* Triángulo apuntando hacia abajo */
  border-width: 8px 7px 0 7px;
  border-style: solid;
  border-color: #016da3 transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

/* Mostrar ambos en hover */
.document-text-search-clear:hover::before,
.document-text-search-clear:hover::after {
  opacity: 1;
}