/* =========================================================================
   TOOLS.CSS — Bibles24.com
   Estilos compartidos por las páginas de herramientas (/tools/search,
   /tools/compare, y las que se agreguen en próximas fases).
   ========================================================================= */

.tool-header {
    padding: var(--sp-6) 0 var(--sp-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-6);
}

.tool-header .eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-dark);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: var(--sp-3);
}

.tool-header h1 { margin-bottom: var(--sp-2); }
.tool-header p { max-width: 640px; color: var(--muted); margin-bottom: 0; }

.tool-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

@media (max-width: 900px) {
    .tool-layout { grid-template-columns: 1fr; }
}

.tool-form-card {
    position: sticky;
    top: 88px;
}

@media (max-width: 900px) {
    .tool-form-card { position: static; }
}

/* ---- Autocomplete de historial de búsqueda ---- */
.search-input-wrap { position: relative; }

.history-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--paper-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
}

.history-dropdown-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.history-dropdown-head button {
    background: none;
    border: none;
    color: var(--accent-dark);
    font-size: var(--fs-xs);
    cursor: pointer;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.history-item:hover { background: var(--paper-alt); }

.history-item button {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

/* ---- Fichas explicativas de método de búsqueda ---- */
.method-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.method-info-card {
    background: var(--paper-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
}

.method-info-card .icon { font-size: 1.2rem; margin-right: var(--sp-2); }
.method-info-card strong { display: block; margin-bottom: 2px; font-size: var(--fs-sm); }
.method-info-card span { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Temas (theme search) ---- */
.theme-preview {
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

/* ---- Rango de versículos (selector) ---- */
.range-hint {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin: -var(--sp-2) 0 var(--sp-3);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
}

/* ---- Botón de acción con estado cargando ---- */
.btn-loading::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toolbar de resultados (copiar, imagen, guardar) ---- */
.results-toolbar {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}